<template>
    <div class="issue-show">
        <template v-if="issueContentAll && issueContentAll.length>0">
            <div v-for="issueItem in issueContentAll" class="issue-item">
                <el-link :underline="false" class="name" @click="$router.push({path: '/show/article/person', query: {userId: issueItem.createBy}})">{{issueItem.username}}:</el-link>
                &nbsp;&nbsp;&nbsp;<span class="word">{{issueItem.word}}</span>
                &nbsp;&nbsp;&nbsp;<small class="time">{{issueItem.createTime| formatDate}}</small>
                <div class="zan">
                    <el-link :underline="false" @click="issueItem.isZan&&issueItem.isZan==1?cancelZan(issueItem):addZan(issueItem)">
                        <i class="fa fa-thumbs-o-up"
                           :style="{color: issueItem.isZan&&issueItem.isZan==1?'red':'black'}"
                           aria-hidden="true"
                        >
                            {{
                                issueItem.zan&&issueItem.zan*1>0
                                    ? (issueItem.zan < 10?issueItem.zan:'9+')
                                    :''
                            }}
                        </i>
                    </el-link>
                </div>
                <hr>
            </div>
        </template>
        <template v-else>
            <div class="issue-item">暂无留言评论......</div>
        </template>
    </div>
</template>

<script>
    import {formatDate} from "@/utils/mixin.js"
    export default {
        name: "issueShowComponent",
        data(){
            return {
                issueWord:"",
                issueContentAll:[],
            }
        },
        props:{
            issueData: {
                type: Object,
                default(){
                    return {};
                }
            }
        },
        watch:{
            issueData(val){
                this.issueContentAll = val.list;
            }
        },
        methods:{
            addZan(issue){
                this.$api.Issue.addZan(issue).then(data=>{
                    if (data && data.code === 0) {
                        this.issueWord = '';
                        // this.$emit("findIssueList");
                        this.issueContentAll = this.issueContentAll.map(item=>{
                            if(item.id === issue.id){
                                item.isZan=1;
                                item.zan++;
                                return item;
                            }else{
                                return item;
                            }
                        })
                    }else if(data && data.code === 5000){
                        this.$confirm(data.msg+'是否登录或者简单注册下?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/login");
                        });
                    }else {
                        this.$message.error(data.msg)
                    }
                })
            },
            cancelZan(issue){
                this.$api.Issue.cancelZan(issue).then(data=>{
                    if (data && data.code === 0) {
                        // this.$emit("findIssueList");

                        this.issueContentAll = this.issueContentAll.map(item=>{
                            if(item.id === issue.id){
                                item.isZan=0;
                                item.zan==0?0:item.zan--;
                                return item;
                            }else{
                                return item;
                            }
                        });

                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
        },
        mixins: [formatDate]
    }
</script>

<style scoped>

    .issue-show{
        padding: 10px;
    }

    .issue-item{
        width: 100%;
        margin: 20px 10px;
    }

    .name{
        font-weight: bold;
    }
    .name:hover{
        color: red;
    }

    .time{
        color: gray;
    }

    .zan{
        width: 40px;
        float: right;
    }

    .zan:hover{
        color: red;
    }


</style>